<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Promise链式调用_解决回调地狱</title>
</head>

<body>
  <form>
    <span>省份：</span>
    <select class="select1">
      <option class="province"></option>
    </select>
    <span>城市：</span>
    <select>
      <option class="city"></option>
    </select>
    <span>地区：</span>
    <select>
      <option class="area"></option>
    </select>
  </form>
  <script src="https://unpkg.com/axios@0.21.1/dist/axios.min.js"></script>
  <script>
    /**
     * 目标：把回调函数嵌套代码，改成Promise链式调用结构
     * 需求：获取默认第一个省，第一个市，第一个地区并展示在下拉菜单中
    */

    //  let p=  axios({
    //       url: 'http://hmajax.itheima.net/api/province'
    //     }).then(res => {
    //       const pname= res.data.list[0]
    //       const lis=  data.map(ele=>{
    //         return `<option class="province">${ele}</option>`
    //       })
    //       document.querySelector('.select1').innerHTML=lis.join('')
    //       return 
    //     })   

    //     const city = document.querySelector('.city')
    //     let p2 = p.then(res1 => {
    //       console.log(res1);
    //       return axios({
    //         url: 'http://hmajax.itheima.net/api/city',
    //         params: {
    //           pname:res.data.data.list
    //         }
    //       })
    //     })

    // let p3 = p2.then(res2 => { 

    // })


    axios({
      url: 'http://hmajax.itheima.net/api/province'
    }).then(res => {
      return axios({
        url: 'http://hmajax.itheima.net/api/city',
        params: {
          pname
        }
      })
    }).then(res2 => {
      const cname = res2.data.list[0]
      console.log(res2);
      // 获取
      return axios({
        url: 'http://hmajax.itheima.net/api/area',
        params: {
          pname,
          cname
        }
      })
    }).then(res => {
      console.log(res.data.list, '地区');
    })
    // 实际开发中   直接在promise的最后添加上catch方法  在其他地方添加  捕获困难



  </script>
</body>

</html>